import {
  init,
  styleModule,
  eventListenersModule,
  h,
} from 'snabbdom'

let oldVNode

const handleClick = vnode => {
  const newVNode = h('div#container.vnode2', [
    h('h1', {
      style: {
        color: 'blue',
      },
    }, 'Hello Snabbdom'),
    h('p', {
      on: {
        click: handleClick,
      },
    }, '请点击我')
  ])
  oldVNode = patch(vnode, newVNode)
}

const patch = init([
  styleModule,
  eventListenersModule,
])

// h函数第一个参数：标签+选择器，第二个参数：如果是字符串就是标签中的文本内容
const vnode = h('div#container.test', 'Hello World')
const app = document.querySelector('#app')

// patch函数对比两个VNode更新差异
// 第一个参数：旧的VNode或者DOM元素，第二个参数：新的VNode
oldVNode = patch(app, vnode)

setTimeout(() => {
  const newVNode = h('div#container.vnode1', [
    h('h1', 'Hello Snabbdom'),
    h('p', 'xxxxxxxx')
  ])
  oldVNode = patch(oldVNode, newVNode)

  // 清空节点内容
  // patch(oldVNode, h('!'))
}, 2000)

setTimeout(() => {
  const newVNode = h('div#container.vnode2', [
    h('h1', {
      hook: {
        insert: vnode => {
          console.log(vnode)
        },
        create: vnode => {
          console.log(vnode)
        }
      },
      style: {
        color: 'red',
      },
    }, 'Hello Snabbdom'),
    h('p', {
      on: {
        click: () => {
          handleClick(oldVNode)
        },
      },
    }, '请点击我')
  ])
  oldVNode = patch(oldVNode, newVNode)
}, 5000)
